<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 弹性布局:一个容器的display属性设置为flex,该容器即为弹性布局容器，里面的内容将不再遵循块状元素独占一行的规则排序-->
		<style>
			p{
				width: 100px;
				height: 100px;
				background-color: yellow;
				border: solid 1px blue;
			}
			div{
				height: 800px;
				border: solid 1px red;
				display: flex;
				
				/* 改变主轴方向 */
				flex-direction: column;/* 将主轴方向设置为垂直方向 */
				flex-direction: row;/* 默认主轴水平 */
				
				/* 默认主轴方向水平方向，主轴对齐方式 */
				justify-content: center;
				justify-content: flex-start;/* 水平居左(默认对齐方式) */
				justify-content: flex-end;/* 水平居右 */
				justify-content: space-between;/* 两端对齐 */
				justify-content: space-around;/* 等间距对齐，两端元素距离div父容器的距离是每个子元素间距的一半 */
			
				/* 侧轴垂直于主轴 设置侧轴对齐方式 */
				align-items: flex-start;/* 上对齐（默认） */
				align-items: flex-end;/* 下对齐 */
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>
